<template>
  <main class="md:w-2/5 w-full mx-auto bg-white position md:mt-30 mt-10 p-7 rounded-lg shadow-md">
    <div class="text-center font-bold text-2xl">登录</div>

    <el-form label-width="80px">
      <el-form-item label-width="0" class="mt-3">
        <el-input name="phone" placeholder="请输入手机号码" size="large" v-model="apiForm.userPhone"></el-input>
      </el-form-item>
      <el-form-item label-width="0" class="mt-3">
        <el-input name="account" placeholder="请输入账号" size="large" v-model="apiForm.userAccount"></el-input>
      </el-form-item>
      <el-form-item label-width="0">
        <el-input name="pwd" type="password" placeholder="请输入登录密码" size="large"
          v-model="apiForm.userPassword"></el-input>
      </el-form-item>
      <el-form-item label-width="0" class="flex">
        <el-button type="default" size="large" class="w-full" @click="activedBtn">点击按钮验证</el-button>
      </el-form-item>
      <el-form-item label-width="0" class="mt-8">
        <el-button type="primary" size="large" class="w-full mx-auto" :disabled="!btnState"
          @click="login">登录</el-button>
      </el-form-item>
    </el-form>


    <div class="flex justify-around">
      <div class="cursor-pointer hover:text-primary" @click="$router.push('/passport/findPwd')">忘记密码</div>
      <div class="cursor-pointer hover:text-primary" @click="$router.push('/passport/register')">立即注册</div>
    </div>
  </main>

</template>

<script setup>
import { loginApi } from '@/apis/user';
import { ElMessage, ElNotification } from 'element-plus';
import { reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
let btnState = ref(false)
let apiForm = reactive({
  userPhone: '',
  userAccount: '',
  userPassword: ''
})

const activedBtn = () => {
  if (apiForm.userPassword !== '') {
    btnState.value = true
  } else {
    ElMessage({
      message: '请先填写完表单',
      type: 'error'
    })
  }
}


const login = async () => {
  if (apiForm.userPassword == '' || apiForm.userAccount == '' || apiForm.userPhone == '') {
    ElMessage({
      message: '请先填写完表单',
      type: 'error'
    })
  } else {
    let res = await loginApi(apiForm)
    console.log(res)
    if (res.data.message == '登录成功') {
      ElNotification({
        title: '登录成功',
        message: '欢迎用户，' + res.data.data.userInfo.userAccount + '！',
        type: 'success',
      })
      localStorage.setItem('userId', res.data.data.userInfo.userId)
      localStorage.setItem('userAct', res.data.data.userInfo.userAccount)
      router.push('/')
    } else {
      ElMessage({
        message: '登录失败',
        type: 'error'
      })
    }
  }
}
</script>